<template>
  <data-table
    :config="tableConfig"
    :data-list="tableDataList"
    :data-count="tableDataCount"
    :pagination="tablePagination"
    @currentChange="handleCurrentChange"
    @sizeChange="handleSizeChange"
    :show-toolbar="mode === 'edit'"
  >
    <template #header>
      <el-button type="primary" size="small" @click="handleTableHeaderAdd">
        <i class="el-icon-plus"></i>
        添加
      </el-button>
    </template>
    <template #isp="scope">
      {{ scope.row.isp?.name }}
    </template>
    <template #operation="scope" v-if="mode === 'edit'">
      <el-link :underline="false" @click="handleRowEdit(scope.row)">
        <el-icon :size="16" style="vertical-align: middle">
          <edit />
        </el-icon>
      </el-link>
      <el-popconfirm title="确定删除？" @confirm="handleRowDelete(scope.row)">
        <template #reference>
          <el-link :underline="false">
            <el-icon :size="16" style="vertical-align: middle">
              <delete />
            </el-icon>
          </el-link>
        </template>
      </el-popconfirm>
    </template>
  </data-table>
  <mm-dialog
    ref="mainDialogRef"
    :config="mainDialogConfig"
    :defaultData="mainDialogDefaultData"
    :rules="mainDialogValidateRules"
  >
    <template #footer>
      <el-button @click="handleDialogCancel">取 消</el-button>
      <el-button type="primary" @click="handleDialogConfirm">确 定</el-button>
    </template>
  </mm-dialog>
</template>

<script lang="ts">
import { defineComponent } from 'vue'
import { Edit, Delete } from '@element-plus/icons'
import { PageOptions, usePage } from '@/hooks/use-page'
import * as IcafeAdslApi from '@/api/customer/icafe-adsl'
import DataTable from '@/components/data-table/index.vue'
import MmDialog from '@/components/mm-dialog/index.vue'
import { tableConfig } from './config/table.config'
import { dialogConfig as mainDialogConfig } from './config/main-dialog.config'
import { deepClone } from '@/utils/common'

export default defineComponent({
  name: 'IcafeAdsl',
  props: {
    icafeId: {
      type: Number,
      required: true
    },
    mode: String
  },
  components: { DataTable, MmDialog, Edit, Delete },
  setup(props) {
    // 页面配置选项
    const pageOptions: PageOptions = {
      dialogLayoutRows: mainDialogConfig.layout,
      isCheckQueryPermission: false,
      dataParams: { icafe_id: props.icafeId },
      queryPagination: { currentPage: 1, pageSize: 3 }
    }

    // 页面逻辑
    const {
      tableDataList,
      tableDataCount,
      tablePagination,
      handleCurrentChange,
      handleSizeChange,
      mainDialogRef,
      mainDialogDefaultData,
      mainDialogValidateRules,
      getDataList,
      createData,
      updateData,
      deleteData
    } = usePage(IcafeAdslApi, pageOptions)

    /**
     * 表格相关事件
     */
    // 表格工具栏 - 添加
    const handleTableHeaderAdd = () => {
      mainDialogDefaultData.value = {}
      mainDialogRef.value?.visible(true)
    }

    // 行操作 - 编辑
    const handleRowEdit = (row: any) => {
      mainDialogDefaultData.value = deepClone(row)
      mainDialogRef.value?.visible(true)
    }

    // 行操作 - 删除
    const handleRowDelete = (row: any) => {
      deleteData(row.id)
    }

    /**
     * 主对话框相关事件
     */
    // 取消按钮
    const handleDialogCancel = () => {
      mainDialogRef.value?.visible(false)
    }

    // 确定按钮
    const handleDialogConfirm = () => {
      mainDialogRef.value?.validate((isValid) => {
        if (!isValid) {
          return
        }

        if (Object.keys(mainDialogDefaultData.value).length) {
          updateData(mainDialogDefaultData.value.id, mainDialogRef.value?.dialogForm)
        } else {
          createData(mainDialogRef.value?.dialogForm)
        }
      })
    }

    return {
      // 表格部分
      tableConfig,
      tableDataList,
      tableDataCount,
      tablePagination,
      handleCurrentChange,
      handleSizeChange,
      handleTableHeaderAdd,
      handleRowEdit,
      handleRowDelete,
      // 对话框部分
      mainDialogConfig,
      mainDialogRef,
      mainDialogDefaultData,
      mainDialogValidateRules,
      handleDialogCancel,
      handleDialogConfirm
    }
  }
})
</script>

<style lang="less" scoped>
.el-link + .el-link {
  margin-left: 5px;
}
</style>
